<template name="cloud">
	<div class="main-content-flex">
		<section class="page-container page-home page-static page-settings">
			{{#header sectionName="Connectivity_Services" hideHelp=true fixedHeight=true fullpage=true}}
				<div class="rc-header__section-button">
					{{#unless info.workspaceRegistered}}
						<button class="rc-button rc-button--small rc-button--primary rc-button--outline js-register">
							{{_ "Cloud_Register_manually"}}
						</button>
					{{/unless}}
					<a href="https://cloud.rocket.chat" class="rc-button rc-button--primary action cloud-console-btn" target="_blank">{{_ "Cloud_console"}}</a>
				</div>
			{{/header}}
			<div class="content">
				{{#requiresPermission 'manage-cloud'}}
					<div class="section">

						<div class="section-title">
							<div class="section-title-text">
								{{_ "Cloud_what_is_it"}}
							</div>
						</div>

						<div class="section-content">
							<p>{{_ "Cloud_what_is_it_description"}}</p>
						</div>

						<details>
							<div class="section-content">
								<p>{{_ "Cloud_what_is_it_services_like"}}</p>
								<ul style="list-style-type:disc;margin-left:15px;">
									<li>{{_ "Register_Server_Registered_Push_Notifications"}}</li>
									<li>{{_ "Register_Server_Registered_Livechat"}}</li>
									<li>{{_ "Register_Server_Registered_OAuth"}}</li>
									<li>{{_ "Register_Server_Registered_Marketplace"}}</li>
								</ul>
							</div>
							<div class="section-content">
								{{_ "Cloud_what_is_it_additional"}}
							</div>
						</details>
					</div>
					<div class="section">
						{{#if info.connectToCloud}}
							{{#if info.workspaceRegistered}}
								<div class="section-content border-component-color">
									<p>{{_ "Cloud_workspace_connected"}}</p>
									<div class="input-line double-col">
										{{#if isLoggedIn}}
											<label class="setting-label" title=""></label>
											<div class="setting-field">
												<button type="button" class="rc-button rc-button--primary action logout-btn" target="_blank">{{_ "Cloud_logout"}}</button>
											</div>
										{{else}}
											<label class="setting-label" title=""></label>
											<div class="setting-field">
												<button type="button" class="rc-button rc-button--primary action login-btn" target="_blank">{{_ "Cloud_login_to_cloud"}}</button>
											</div>
										{{/if}}
									</div>
								</div>

								<div class="section-content border-component-color">
									<p>{{_ "Cloud_workspace_disconnect"}}</p>
									<div class="input-line double-col">
										<label class="setting-label" title=""></label>
										<div class="setting-field">
											<button type="button" class="rc-button rc-button--danger action disconnect-btn">{{_ "Disconnect"}}</button>
										</div>
									</div>
								</div>
							{{else}}
								<div class="section-content border-component-color">
									<div class="input-line double-col">
										<label class="setting-label" title="cloudEmail">{{_ "Email"}}</label>
										<div class="setting-field">
											<input class="input-monitor rc-input__element" type="text" name="cloudEmail" value="{{ info.email }}">
											<div class="settings-description secondary-font-color">{{_ "Cloud_address_to_send_registration_to"}}</div>
										</div>
									</div>
									<div class="input-line double-col">
										<label class="setting-label" title=""></label>
										<div class="setting-field">
											<button type="button" class="rc-button rc-button--primary action update-email-btn" style="float:left">{{_ "Cloud_update_email"}}</button>
											<button type="button" class="rc-button rc-button--primary action resend-email-btn" style="float:left;margin-left:5px;">{{_ "Cloud_resend_email"}}</button>
										</div>
									</div>

									<div class="input-line double-col">
										<label class="setting-label" title="cloudToken">{{_ "Token"}}</label>
										<div class="setting-field">
											<input class="input-monitor rc-input__element" type="text" name="cloudToken" value="{{ info.token }}">
											<div class="settings-description secondary-font-color">{{_ "Cloud_manually_input_token"}}</div>
										</div>
									</div>
									<div class="input-line double-col">
										<label class="setting-label" title=""></label>
										<div class="setting-field">
											<button type="button" class="rc-button rc-button--primary action connect-btn">{{_ "Connect"}}</button>
										</div>
									</div>

									<p>{{_ "Cloud_connect_support"}}: <a href="mailto:support@rocket.chat?subject=[Self Hosted Registration]&body=WorkspaceId: {{ info.workspaceId }}%0D%0ADeployment Id: {{ info.uniqueId }}%0D%0AIssue: <please describe your issue here>">support@rocket.chat</a></p>
								</div>
							{{/if}}
						{{else}}
							<div class="section-title">
								<div class="section-title-text">
									{{_ "Cloud_registration_required"}}
								</div>
							</div>
							<div class="section-content border-component-color">
								<p>{{_ "Cloud_registration_required_description"}}</p>
								<button type="button" class="rc-button rc-button--primary action register-btn">{{_ "Cloud_registration_requried_link_text"}}</button>
							</div>
						{{/if}}
					</div>
					{{#if info.connectToCloud}}
					<div class="section">
						<div class="section-title">
							<div class="section-title-text">
								{{_ "Cloud_troubleshooting"}}
							</div>
						</div>

						<div class="section-content border-component-color">
							<p>{{_ "Cloud_workspace_support"}}</p>
							<div class="input-line double-col">
								<label class="setting-label" title=""></label>
								<div class="setting-field">
									<button type="button" class="rc-button rc-button--danger action sync-btn">{{_ "Sync"}}</button>
								</div>
							</div>
						</div>

						<div class="section-content">
							{{_ "Cloud_status_page_description"}}: <a href="https://status.rocket.chat" target="_blank">status.rocket.chat</a>
						</div>
					</div>
					{{/if}}
				{{/requiresPermission}}
			</div>
		</section>
	</div>
</template>
